import { right } from "@antv/g2plot/lib/plots/sankey/sankey";

export default {
  data() {
    return {
      tree_option: {} /* 矩形树状图配置项 */,
    };
  },
  mounted() {
    var map_data = [
      { name: "北京市", value: 21893095, grade: 1320 },
      { name: "天津市", value: 13866009, grade: 1138 },
      { name: "河北省", value: 74610235, grade: 303 },
      { name: "山西省", value: 34915616, grade: 223 },
      { name: "内蒙古自治区", value: 24049155, grade: 24 },
      { name: "安徽省", value: 61027171, grade: 396 },
      { name: "浙江省", value: 64567588, grade: 527 },
      { name: "福建省", value: 41540086, grade: 386 },
      { name: "江西省", value: 45188635, grade: 299 },
      { name: "江苏省", value: 84748016, grade: 735 },
      { name: "上海市", value: 24870895, grade: 3807 },
      { name: "湖北省", value: 57752557, grade: 274 },
      { name: "湖南省", value: 66444864, grade: 283 },
      { name: "贵州省", value: 38562148, grade: 266 },
      { name: "重庆市", value: 32054159, grade: 321 },
      { name: "四川省", value: 83674866, grade: 136 },
      { name: "广东省", value: 126012510, grade: 1237 },
      { name: "陕西省", value: 39528999, grade: 113 },
      { name: "河南省", value: 99365519, grade: 654 },
      { name: "山东省", value: 101527453, grade: 637 },
      { name: "青海省", value: 5923957, grade: 8 },
      { name: "广西壮族自治区", value: 50126804, grade: 119 },
      { name: "云南省", value: 47209277, grade: 89 },
      { name: "西藏自治区", value: 3648100, grade: 3 },
      { name: "新疆维吾尔自治区", value: 25852345, grade: 10 },
      { name: "宁夏回族自治区", value: 7202654, grade: 66 },
      { name: "海南省", value: 10081232, grade: 93 },
      { name: "甘肃省", value: 25019831, grade: 37 },
      { name: "黑龙江省", value: 31850088, grade: 60 },
      { name: "辽宁省", value: 42591407, grade: 293 },
      { name: "吉林省", value: 24073453, grade: 137 },
      { name: "台湾省", value: 23141234, grade: 164 },
      { name: "香港特别行政区", value: 7498100, grade: 6910 },
      { name: "澳门特别行政区", value: 672800, grade: 23600 },
    ];
    this.tree_option = {
      /*       title: {
        text: "中国各省人口数量占比",
        left: "center",
      }, */
      legend: {
        //orient: "horizontal",
        left: "left", // 图例水平居中
        top: "top", // 图例位于顶部
        right: "right",
        bottom: "bottom",
      },
      grid: {
        left: "0%",
        right: "0%",
        top: "0%",
        bottom: "0%",
      },
      tooltip: {
        trigger: "item",
        formatter: function (params) {
          var name = params.name; // 区域名称
          var value = params.value; // 总人口数
          var density = params.data.grade; // 人口密度

          return (
            name +
            "<br/>" +
            "人口: " +
            value.toLocaleString() +
            "<br/>" +
            "人口密度: " +
            density.toLocaleString() +
            " 人/平方公里"
          );
        },
      },
      visualMap: {
        // orient: 'horizontal', // 设置为横向显示
        min: 1000000,
        max: 100000000,
        right: "0%",
        top: "center",
        text: ["10000万", "1000万"],
        textStyle: { color: "#fff" },
        calculable: true,
        inRange: {
          //渐变颜色
          color: [
            "#F7F7F7", // 1. 极浅灰色 - 极低密度
            "#D0D1E6", // 2. 浅蓝色
            "#A6B8E4", // 3. 中浅蓝色
            "#7B9AE3", // 4. 中蓝色
            "#4D79E6", // 5. 深蓝色
            "#1F4C9D", // 6. 更深蓝色
            "#003C77", // 7. 暗蓝色
            "#003B6F", // 8. 深青色
            "#003B67", // 9. 更深青色
            "#003C5D", // 10. 更深灰蓝色
            "#003C54", // 11. 极深蓝色
            "#002D43", // 12. 几乎黑色
            "#001F2B", // 13. 黑色 - 极高密度
          ],
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toFixed(0) + "万";
          }
          return value;
        },
        tooltip: {
          show: false // 关闭跟随移动的数据提示
        }
      },
      /*       visualMap: {
        min: 10000, // 设置最小值
        max: 10000000, // 设置最大值（根据数据范围调整）
        dimension: 1, // 使用数据值的维度
        inRange: {
          color: ["#f7fbff", "#08306b"], // 设置颜色范围
        },
      }, */
      series: [
        {
          type: "treemap",
          roam: false,
          breadcrumb: {
            show: false,
          },
          label: {
            show: true,
            formatter: "{b}\n{c}",
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 1,
          },
          data: map_data,
        },
      ],
    };
  }
}